<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/header.css" rel="stylesheet" />
		<link href="../../css/mui.indexedlist.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
			}
			
			.mui-content {
				height: 100%;
				overflow: auto;
			}
			
			.red-point{
		      position: relative;
		    }
			
		    .red-point::before{
		      content: " ";
		      border: 5px solid #C9394A;/*设置红色*/
		      border-radius:5px;/*设置圆角*/
		      position: absolute;
		      z-index: 3000;
		      right: 0%;
		      margin-right: -10px;
		      margin-top: 0px;
		    }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
			<span class="mui-action-back nav mui-pull-left title-color" style="line-height: 44px; margin-left: 5px;">通讯录</span>
		</header>
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索好友">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner" id="friend_list">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/mui.indexedlist.js"></script>
		<script type="text/javascript">
			mui.init();

			mui.plusReady(function() {
				// 监听当前webview的show事件
				var currentWebview = plus.webview.currentWebview();

				var chat = currentWebview.chat;
				currentWebview.addEventListener("show", function() {
					chat.getFriendList();
					// 从缓存中获取联系人列表，并且渲染到页面
					renderFriendListForCache();
					// 显示通讯录
					showList();
				});


				// 从缓存中获取联系人列表，并且渲染到页面
				function renderFriendListForCache() {
					// 1. 获取联系人列表
					var friendList = app.getFriendList();
					// 如果有数据
					if (friendList) {
						var html = '<ul class="mui-table-view">';
						for (var i = 0; i < friendList.length; i++) {
							var friendGroup = friendList[i];
							var word = friendGroup.word;
							var friends = friendGroup.friends;
							if (!friends) {
								continue;
							}
							html += '<li data-group="' + word + '" class="mui-table-view-divider mui-indexed-list-group" >' + word +
								'</li>';
							for (var j = 0; j < friends.length; j++) {
								var friend = friends[j];
								var imgUrl = friend.friendThumHeadPortrait;
								if (!imgUrl) {
									imgUrl = '../../image/face-default-cat.png'
								} else {
									imgUrl = app.fileServerUrl + imgUrl;
								}
								var friendUserId = friend.friendUserId;
								var friendNickname = friend.friendNickname;
								html +=
									'<li class="mui-media mui-table-view-cell mui-indexed-list-item chat-with-friend" style="padding: 8px 10px;" friendUserId="' +
									friendUserId + '" friendNickname="' + friendNickname + '" friendThumHeadPortrait="' + imgUrl + '" >' +
									'<img class="mui-media-object mui-pull-left" style="max-width: 35px;height: 35px;" src="' + imgUrl + '"/>' +
									'<div class="mui-media-body" style="line-height: 35px;">' + friendNickname + '</div>' +
									'</li>'
							}
						}
						html += '</ul>';
						// 渲染html
						document.getElementById("friend_list").innerHTML = html;
					}

					// 为好友通讯录批量绑定点击事件
					mui("#friend_list").on("tap", ".chat-with-friend", function(e) {
						var friendUserId = this.getAttribute("friendUserId");
						var friendNickname = this.getAttribute("friendNickname");
						var friendThumHeadPortrait = this.getAttribute("friendThumHeadPortrait");
						// 打开聊天子页面
						mui.openWindow({
							url: "../chat/chatting.html",
							id: "chatting-" + friendUserId, // 每个朋友的聊天页面都是唯一对应的
							extras: {
								friendUserId: friendUserId,
								friendNickname: friendNickname,
								friendThumHeadPortrait: friendThumHeadPortrait
							}
						});

					})
				}

				// 从后端获取所有好友列表
				chat.getFriendList = function() {
					var user = app.getUserGlobalInfo();
					mui.ajax(app.serverUrl + "/friend/list", {
						data: {
							userId: user.id
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(res) {
							if (res.code == 0) {
								var friendList = res.data;
								app.setFriendList(friendList);
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							app.showToast(type, "error");
						}
					});
				}

				// 显示通讯录
				function showList() {
					var list = document.getElementById('list');
					list.style.height = document.body.offsetHeight + "px";
					// 创建列表显示
					window.indexedList = new mui.IndexedList(list);
				}



			});
		</script>

	</body>

</html>
